<template>
  <div>
    <div class="tree">
      <div>
        {{treeNode.name}}

      </div>
      <div v-for="node in treeNode.menuChild">
        {{node.name}}

      </div>
    </div>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        treeNode: {
          name: 'AAA',
          pid: '1',
          id: '13',
          menuChild: [{
            name: 'AAAAAA',
            pid: '13',
            id: '132',
            isCheck: false,
            menuChild: []
          }]
        },
        node: {
          name: 'C',
          pid: '1',
          id: '13',
          menuChild: [{
            name: 'C2',
            pid: '13',
            id: '132',
            isCheck: false,
            menuChild: []
          }]
        },
        bool: false
      }
    },
    components: {},
//    beforeCreated(){
//        //在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
//        //在这个函数调用时数据并没有加载，事件也不能调用
//        this.dealData();
//        console.log("beforeCreated=="+this.node);
//    },
//    created(){
//        //数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见
//        //数据已经被实例初始化，可以使用data数据和method中定义的事件方法
//      this.dealData();
//      console.log("created=="+JSON.stringify(this.node));
//    },
//    beforeMount(){
//        //相关的 render 函数首次被调用。
//        //首次加载template模板
//    },
    mounted(){
      //el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
      //
      console.log("mounted==" + JSON.stringify(this.node));
      this.dealData();
    },
    methods: {
      dealData(){
        this.treeNode = this.node
        console.log("dealData 事件==" + JSON.stringify(this.treeNode));
      }
    },

  }

</script>
<style lang="scss" scoped>
</style>
